.w-table-wrap {
  position: relative;
  border-radius: $border-radius;
  border: $border;
  overflow: auto;

  &--loading {
    overflow: hidden;
  }
}

.w-table {
  width: 100%;
  min-height: 100%;
  border-collapse: collapse;
  border: none;
  display: inline-table;
  margin: 0;

  // Table headers.
  // ------------------------------------------------------
  &__header {
    padding: $base-increment;
  }

  &--fixed-header th {
    position: sticky;
    top: 0;
    background-color: #fff;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: $border;
    }
  }

  // Sorting arrow.
  &__header--sortable {
    cursor: pointer;
  }
  &__header-sort {
    color: rgba(0, 0, 0, 0.8);
    vertical-align: text-bottom;
    @include default-transition;

    &--asc {
      transform: rotate(180deg);
    }
    &--desc {
      transform: rotate(0deg);
    }
    &--inactive {
      opacity: 0;
    }
    th:hover &--inactive {
      opacity: 0.5;
    }
    th:hover &--active {
      opacity: 1;
    }
    &--active {
      opacity: 0.7;
    }
  }

  // Progress bar when loading.
  &__progress-bar:nth-child(odd) {
    background: none;
  }
  &__progress-bar td {
    padding: 0;
    height: 1px;
  }
  @-moz-document url-prefix() {
    &__progress-bar td {
      height: 100%;
    }
  }

  &__loading-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-top: 2 * $base-increment;
    padding-bottom: 2 * $base-increment;
  }

  // Table body.
  // ------------------------------------------------------
  tbody tr {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  tbody tr:nth-child(odd):not(.no-data) {
    background-color: $table-tr-odd-color;
  }
  tbody .w-table__row:hover:not(.no-data) {
    background-color: $table-tr-hover-color;
  }
  &__row--selected td {
    position: relative;
  }
  &__row--selected td:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary);
    opacity: 0.2;
    pointer-events: none;
  }

  &__cell {
    padding: round($base-increment / 2) $base-increment;
  }
  &__header:first-child,
  &__cell:first-child {
    padding-left: 2 * $base-increment;
  }
  &__header:last-child,
  &__cell:last-child {
    padding-right: 2 * $base-increment;
  }

  .no-data &__cell {
    background-color: rgba(255, 255, 255, 0.2);
    padding: (2 * $base-increment) $base-increment;
  }
}

.w-table--mobile {
  thead {
    display: none;
  }
  td {
    display: block;
  }
  tr {
    display: block;
    padding-top: $base-increment;
    padding-bottom: $base-increment;
  }

  .w-table__cell {
    display: flex;
    padding-left: 2 * $base-increment;
    padding-right: 2 * $base-increment;
  }

  tr:not(.no-data) .text-center,
  tr:not(.no-data) .text-right {
    text-align: left;
  }

  .w-table__cell:before {
    content: attr(data-label);
    font-weight: bold;
    width: 6.5em;
    padding-right: 0.5em;
    display: inline-flex;
  }
  .no-data .w-table__cell:before {
    display: none;
  }

  .w-table__progress-bar {
    display: table-row;
    td {
      display: table-cell;
    }
    td:before {
      display: none;
    }
  }
}
